<template>
    <div style="background-color: white;height: 600px;padding-left: 10px;padding-top: 5px;margin-top: 10px" >
      <h1>货物信息</h1>
      {{orderId}}
      <hr>
      <br>
      <br>
      <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
        <el-form-item label="货物类型" prop="goodsName" style="width: 300px">
          <template>
            <el-select v-model="ruleForm.goodsName" placeholder="请选择" style="width: 205px">
              <el-option
                v-for="item in goodsTypes"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeName">
              </el-option>
            </el-select>
          </template>
        </el-form-item>

        <el-form-item label="数量" prop="number" style="width: 300px">
          <el-input v-model="ruleForm.number" type="number" @input="countweight(),countbulk()"></el-input>
        </el-form-item>

        <el-form-item label="单件重量" prop="weight" style="width: 300px" >
          <el-input v-model="ruleForm.weight" placeholder="单位：kg" type="number" @input="countweight()"></el-input>
        </el-form-item>
        <el-form-item label="总重量" prop="totalWeight" style="width: 300px">
          <el-input v-model="ruleForm.totalWeight"></el-input>
        </el-form-item>
        <el-form-item label="长度" prop="goodsLong" style="width: 300px" >
          <el-input v-model="ruleForm.goodsLong" placeholder="单位：cm" type="number" @input="countbulk()"></el-input>
        </el-form-item>
        <el-form-item label="宽" prop="goodsWide" style="width: 300px"  >
          <el-input v-model="ruleForm.goodsWide" placeholder="单位：cm" type="number" @input="countbulk()"></el-input>
        </el-form-item>
        <el-form-item label="高" prop="goodsHight" style="width: 300px"  >
          <el-input v-model="ruleForm.goodsHight" @input="countbulk()" placeholder="单位：cm" type="number"></el-input>
        </el-form-item>
        <el-form-item label="单件体积" prop="bulk" style="width: 300px" >
          <el-input v-model="ruleForm.bulk"></el-input>
        </el-form-item>
        <el-form-item label="总体积" prop="totalBulk" style="width: 300px">
          <el-input v-model="ruleForm.totalBulk"></el-input>
        </el-form-item>
        <el-form-item label="包装类型" prop="boxType" style="width: 300px">
          <template>
            <el-select v-model="ruleForm.boxType" placeholder="请选择" style="width: 205px">
              <el-option
                v-for="item in boxTypes"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeName">
              </el-option>
            </el-select>
          </template>

        </el-form-item>
        <el-form-item label="运输类型" prop="tranType" style="width: 300px">
          <template>
            <el-select v-model="ruleForm.tranType" placeholder="请选择" style="width: 205px">
              <el-option
                v-for="item in tranTypes"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeName">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <br>
        <el-form-item label="备注">
          <el-input type="textarea" style="width: 1000px"></el-input>
        </el-form-item>
        <el-form-item>
          <br>
          <br>

          <div class="bbb">
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </div>

        </el-form-item>
      </el-form>
    </div>
</template>

<script>
    export default {
        name: "rbasicinfo",
      data(){
          return {
            boxTypes:[
              {
                typeName:'袋装',
                typeId:1
              },
              {
                typeName:'纸箱',
                typeId:2
              },
              {
                typeName:'定制木箱',
                typeId:3
              }
            ],
            tranTypes:[
              {
                typeName:'卡车',
                typeId:1
              },
              {
                typeName:'箱式柜车',
                typeId:2
              },
              {
                typeName:'板车',
                typeId:3
              }
            ],
            goodsTypes:[
              {
                typeName:'大件',
                typeId:1
              },
              {
                typeName:'中件',
                typeId:2
              },
              {
                typeName:'小件',
                typeId:3
              }
            ],
            ruleForm: {
              orderId: '',
              goodsName: '',
              number: '',
              weight: '',
              totalWeight: '',
              goodsLong: '',
              goodsWide:'',
              goodsHight: '',
              bulk: '',
              totalBulk: '',
              boxType: '',
              tranType: ''
            },
            orderId:'',
            rules: {
              goodsName: [
                { required: true, message: '请输入货物名称', trigger: 'blur' },

              ],
              number: [
                { required: true, message: '请输入货物数量', trigger: 'blur' },
              ],
              weight: [
                { required: true, message: '请输入货物重量', trigger: 'blur' },
              ],
              totalWeight: [
                { required: true, message: '请输入货物总重', trigger: 'blur' }
              ],
              goodsLong: [
                { required: true, message: '请输入货物长度', trigger: 'blur' },
              ],
              goodsWide: [
                { required: true, message: '请输入货物宽度', trigger: 'blur' },
              ],
              goodsHight: [
                { required: true, message: '请输入货物高度', trigger: 'blur' },
              ],

              boxType: [
                { required: true, message: '请输入货物包装类型', trigger: 'blur' },
              ],
              tranId: [
                { required: true, message: '请输入货物运输类型', trigger: 'blur' },
              ]

            }
          }
      },
      methods: {
        load(){
          this.$http({
            method: "GET",
            url: "http://localhost:8090/tGoods",
          }).then(resp => {
            console.log(resp);
            this.ruleForm=resp.data.data.tGoods;
          })
        },
        getAId(){
          this.orderId=this.$route.params.id;
          this.ruleForm.orderId=this.$route.params.id;
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$http({
                method: "POST",
                url: "http://localhost:8090/tGoods",
                data: this.ruleForm
              }).then(resp => {
                let id=this.ruleForm.orderId;
                alert(resp.data.msg);
                this.$router.push(`/home/creatorder/cost/${id}`);
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        countweight(){
          this.ruleForm.totalWeight=this.ruleForm.weight*this.ruleForm.number;

        },
        countbulk(){
          console.log(this.ruleForm.goodsLong);
          this.ruleForm.bulk=(this.ruleForm.goodsLong*this.ruleForm.goodsWide)*this.ruleForm.goodsHight;
          console.log(this.ruleForm.bulk);
          this.ruleForm.totalBulk= this.ruleForm.bulk*this.ruleForm.number;
        }
      },
      created() {
        this.getAId();
        this.load();
      }

    }
</script>

<style scoped>
  .bbb{
    float: left;
    width: 100%;
  }
</style>
